import NavBar from "./components/NavBar";
import Menu from "./components/Menu";
import Cart from "./components/Cart";
import FoodsCategory from "./components/FoodsCategory";

// 引入触发actios方法的函数
import { asyncGetFoods } from "./store/modules/takeaway";
import { useSelector, useDispatch } from "react-redux";

import "./App.scss";
import { useEffect } from "react";

const App = () => {
  //  useSelector函数用于从 Redux store 中获取 state 的值
  const { foodsList , menuInd } = useSelector((state) => state.food);

  // 得到dispatch函数
  const dispatch = useDispatch();

  // 触发dispatch函数
  useEffect(() => {
    dispatch(asyncGetFoods());
  }, [dispatch]);

  return (
    <div className="home">
      {/* 导航 */}
      <NavBar />

      {/* 内容 */}
      <div className="content-wrap">
        <div className="content">
          <Menu />

          <div className="list-content">
            <div className="goods-list">
              {/* 外卖商品列表 */}
              {foodsList.map((item,index) => {
                return (
                  index === menuInd &&
                  <FoodsCategory
                    key={item.tag}
                    // 列表标题
                    name={item.name}
                    // 列表商品
                    foods={item.foods}
                  />
                );
              })}
            </div>
          </div>
        </div>
      </div>

      {/* 购物车 */}
      <Cart />
    </div>
  );
};

export default App;
